<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <link th:href="@{/assets/css/page.css}" rel="stylesheet"/>
    <title th:text="#{recycle.bin.title}"></title>
    <script th:inline="javascript">
        const FILE_TYPE_FILE = 0
        const FILE_TYPE_FOLDER = 1
        var _gridWidth;
        var _gridHeight;

        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-65 -40; /* -32 顶部主菜单高度，   -90 查询条件高度*/
        }
        $(function () {
            resizePageSize();
            var _columnWidth = (_gridWidth-150)/5;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{/recycle/queryRecycleInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'fileUuid',name : 'fileUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{file.name}]]*/"",name : 'fileName',width : _columnWidth, sortable : true,align : 'center',
                        process: function(v,_trid,_row) {
                            var html = `<div style="display: flex; width: 100px; ">`
                            if(_row.fileType === FILE_TYPE_FOLDER){
                                html += `<a href="#" style="color: #00b1ef" class="btn" onclick="enterDir('${_row.fileUuid}','${_row.filePath}')"><i class="glyphicon glyphicon-folder-close" style="margin-right: 5px"></i>
                                        <span>${v}</span>
                                   </a>`
                            }else{
                                html += `<a href="#" style="color: #f7ba2a" class="btn"><i class="glyphicon glyphicon-file" style="margin-right: 5px"></i>
                                        <span>${v}</span>
                                   </a>`
                            }
                            html += `</div>`
                            return html;
                        }},
                    {display : /*[[#{file.size}]]*/"",name : 'fileCapacity',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{file.last.time}]]*/"",name : 'modtime',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.operation}]]*/"",name : 'fileUuid',width : _columnWidth, sortable : true,align : 'center',process: function(v,_trid,_row) {
                            var html = `<div>`
                            if([[${#authorization.expression("hasRole('ROLE_cldk_data_user_mod')")}]]) {
                                html += `<a href="#" class="btn" onclick="modifyUserInfo('${v}')" title=[[#{common.modify}]]><i class="glyphicon glyphicon-pencil"></i></a>`
                            }if([[${#authorization.expression("hasRole('ROLE_cldk_data_user_del')")}]]) {
                                html += `<a href="#" class="btn" onclick="deleteFileInfo('${v}','${_row.fileName}')" title=[[#{common.delete}]]><i class="glyphicon glyphicon-trash"></i></a>`
                            }
                            html += `<div>`
                            return html;
                        }},
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                // rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });


            query()

            //删除文件对话框
            $("#delete-file-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{file.delete.dialog.title}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var ids =  $("#delete-file-dialog-id").attr("ids")

                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/file/deleteFileByIds}]]*/'',
                                data: [{name:"ids",value:ids}],
                                success: function (data) {
                                    // console.info('deleteFileByIds:' +JSON.stringify(data))
                                    message(data.msg)
                                    if(data.success){
                                        $("#delete-file-dialog-id").dialog('close')
                                        query()
                                    }

                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });
                        }
                    },//end button
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }//end buttons
                ]
            });

        }) // end ready function

        /**
         * 表格查询
         */
        function query() {

            var parentId = $("#file-folder-id").attr("parent-id");

            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"parentId",value:parentId}
                ]

            }).flexReload()
        }

        // 双击事件
        function rowDbclick(r){
            $(r).dblclick(
                function() {
                    var columnsArray = $(r).attr('ch').split("_FG$SP_");
                    // console.info(columnsArray);
                    var fileUuid = columnsArray[0]


                });
        }


        //删除文件
        function bathDeleteFile() {
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0)
            if(ids.length === 0){
                message(/*[[#{common.empty}]]*/'');
                return;
            }
            $("#delete-file-dialog-id").attr('ids',ids)

            // console.info("bathDeleteFile idx:" + JSON.stringify(ids))
            $("#delete-file-dialog-id").dialog('open')

        }

        // 单独删除用户
        function deleteFileInfo(fileUuid,fileName) {
            $("#delete-file-dialog-id").attr('ids',fileUuid)
            $("#delete-file-list-id").text(fileName)
            $("#delete-file-dialog-id").dialog('open')
        }

        var allocateSetting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        // 新增：批量复制文件
        function batchCopyFile() {
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
            if (ids.length === 0) {
                message(/*[[#{common.empty}]]*/'');
                return;
            }
            // 使用attr方法存储复制的文件ID
            $("#paste-file-btn").attr("data-copied-ids", ids.join(','));
            message(/*[[#{user.copy.success}]]*/'');
            $("#paste-file-btn").show();
        }

    </script>
</head>

<body>
<header>
    <input id="file-name-id" th:placeholder="#{file.name.plc}">

    <a href="#" class="btn-info btn" onclick="query()">
        <i class="glyphicon glyphicon-search"></i>
        <span th:text="#{common.query}"></span>
    </a>

    <a href="#"  class="btn-info btn" onclick="addUser()">
        <i class="glyphicon glyphicon-refresh"></i>
        <span th:text="#{common.modify}"></span>
    </a>

    <a href="#"  class="btn-info btn" onclick="bathDeleteUser()">
        <i class="glyphicon  glyphicon-open"></i>
        <span th:text="#{common.add}"></span>
    </a>

    </a>
</header>
<table id="flexigrid-id"></table>

<div id="delete-file-dialog-id"  style="display: none">
    <span id="delete-file-list-id"></span>
</div>

    </form>
</div>
</body>
</html>